<template>
  <div class="scoring-board">
    <van-nav-bar
      :placeholder="true"
      fixed
      title="分数列表"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="scoring-board-content">
      <div class="scoring-board-title">
        <div class="title-content">
          <h4>{{ projectInfo.projectName }}</h4>
          <div class="score-info">
            <p>{{ projectInfo.activityTitle }}</p>
            <p>{{ projectInfo.tickName }}</p>
            <p>
              更新时间：{{
                $dayjs(projectInfo.expireTime).format("YYYY-MM-DD")
              }}
            </p>
          </div>
        </div>
        <div class="user-avatar">
          <van-image
            round
            width="1rem"
            height="1rem"
            :src="projectInfo.sponsorAvatar"
          />
          <div>{{ projectInfo.sponsorName }}</div>
        </div>
      </div>

      <div class="scoring-board-com">
        <!-- 这里写页面 -->

        <tableCom :data="data" :column="column" :operatesCol="operatesCol">
          <!-- <template slot="option">
          <div class="table-com-td item-option">
            晋级
          </div>
        </template> -->
        </tableCom>
      </div>
    </div>
    <div class="homeBtn">
      <van-button
        style="width: 100%; height: 6vh; border-radius: 0.3rem"
        @click="toSubmit"
        color="linear-gradient(to right, #5c79f7, #5c74f4)"
        >提交分数</van-button
      >
    </div>
  </div>
</template>

<script>
import tableCom from "@/components/tableCom.vue";
import { Dialog } from "vant";
import {
  judgeScoreProject,
  scoreRecordSignal,
  scoreRecordMultiple,
  scoreSubmit
} from "@/apis/score";
import { mapMutations } from "vuex";
export default {
  name: "scoringBoard",
  data() {
    return {
      projectInfo: {},
      data: [],
      column: [
        {
          label: "号码牌",
          prop: "number",
          width: 100,
          isSort: true, // 是否可排序
          SortFun: this.SortCardFun, //排序方法
          SortType: true, //排序状态
          canChange: false, //是否可切换成input框
        },
        {
          label: "总分",
          prop: "score",
          isSort: true,
          SortFun: this.SortAllFun,
          SortType: true,
          canChange: true,
        },
      ],
      operatesCol: [
        {
          name: "修改",
          isShowName: false,
          icon: "records",
          methods: (row) => {
            let params = {
              projectInfo: this.projectInfo,
              scoreInfo: row,
            };
            this.setEditScoreInfo(params);
            this.$router.push({
              path:
                this.projectInfo.modelType == 0
                  ? "/scoring/onlyOneMake"
                  : "/scoring/multipleOnlyOne",
            });
          },
        },
        {
          name: "删除",
          isShowName: false,
          icon: "delete",
          methods: (row) => {
            Dialog.confirm({
        title: "提示",
        message: `确认将${row.number}号选手(${row.score})分从列表删除吗`,
      })
        .then(() => {
          if (row.status == 1) {
            this.$toast.fail("分数已提交，无法删除");
            return
          }
        })
        .catch(() => {
          // on cancel
        });
          },
        },
      ],
    };
  },
  components: { tableCom },
  methods: {
    ...mapMutations("score", ["setEditScoreInfo"]),
    async getInfo() {
      let id = this.$route.query.id;
      const res = await judgeScoreProject(id);
      this.projectInfo = res.result;
      let api = scoreRecordSignal
      const resList = await api(this.projectInfo.id);
      this.data = resList.result;
    },
    SortCardFun(list, item) {
      item.SortType = !item.SortType;
      this.data = list.sort((a, b) => {
        if (item.SortType) {
          return a.number > b.number ? 1 : -1;
        } else {
          return a.number < b.number ? 1 : -1;
        }
      });
    },
    SortAllFun(list, item) {
      item.SortType = !item.SortType;
      this.data = list.sort((a, b) => {
        if (item.SortType) {
          return a.score > b.score ? 1 : -1;
        } else {
          return a.score < b.score ? 1 : -1;
        }
      });
    },

    toSubmit() {
      Dialog.confirm({
        title: "提示",
        message: "提交分数后不可修改，是否确认提交",
      })
        .then(() => {
          if (this.projectInfo.projectStatus == 2) {
            this.$toast.fail("当前项目已经结束了");
            return
          }
          this.scoreSubmit()
        })
        .catch(() => {
          // on cancel
        });
    },
    async scoreSubmit(){
      const params = { scoreProjectId: Number(this.$route.query.id) }
      const res = await scoreSubmit(params)
        if(res.code== 1) return this.$toast(res.message)
				this.$toast.success('提交成功')
				// setTimeout(() => {
				// 	wx.redirectTo({ url: `/pages/index/index` })
				// }, 1500)
    }
  },
  mounted() {
    this.getInfo();
  },
};
</script>

<style lang="less" scoped>
.scoring-board {
  width: 100%;
  height: 100%;

  .scoring-board-content {
    width: 100%;
    height: calc(100% - 1rem);

    .scoring-board-title {
      width: 92%;
      border-radius: 0.2rem;
      height: 3.5rem;
      background: #232136;
      margin: 0.2rem auto 0.2rem;
      background-size: 100% 100%;
      display: flex;
      justify-content: space-between;
      padding: 0.5rem 0.4rem 0.2rem;
      color: #fff;
      align-items: center;

      .title-content {
        padding-top: 0.5rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        h4 {
          font-size: 0.5rem;
          margin-bottom: 0.3rem;
        }

        .score-info {
          p {
            font-size: 0.25rem;
            margin-bottom: 0.2rem;
            color: rgba(255, 255, 255, 0.8);
          }
        }
      }

      .user-avatar {
        text-align: center;
        font-size: 0.3rem;
      }
    }

    .scoring-board-com {
      width: 100%;
      height: calc(100% - 3.5rem);
    }
  }
  .homeBtn {
    background: #27283d;
    height: 12vh;
    padding: 0 0.2rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
